export const bubbleRander = (id: string) => {
  // 获取canvas元素
  const canvas = document.getElementById(id) as HTMLCanvasElement

  const ctx = canvas?.getContext('2d')

  canvas.width = window.innerWidth || document.documentElement.clientWidth
  canvas.height = window.innerHeight || document.documentElement.clientHeight
  window.addEventListener('resize', function () {
    canvas.width = window.innerWidth || document.documentElement.clientWidth
    canvas.height = window.innerHeight || document.documentElement.clientHeight
  })
  // 定义泡泡对象
  class Bubble {
    x: number
    y: number
    radius: number
    speed: number
    draw!: () => void
    update!: () => void
    constructor(x: number, y: number, radius: number, speed: number) {
      this.x = x
      this.y = y
      this.radius = radius
      this.speed = speed
      this.draw = function () {
        ctx!.beginPath()
        ctx!.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
        ctx!.fillStyle = 'rgba(255, 255, 255, 0.5)'
        ctx!.fill()
      }
      this.update = function () {
        this.y -= this.speed
        if (this.y <= 0) {
          this.y = canvas.height
          this.x = Math.random() * canvas.width
        }
      }
    }
  }

  // 绘制泡泡
  Bubble.prototype.draw = function () {
    ctx!.beginPath()
    ctx!.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
    ctx!.fillStyle = 'rgba(255, 255, 255, 0.5)'
    ctx!.fill()
  }

  // 更新泡泡位置
  Bubble.prototype.update = function () {
    this.y -= this.speed
    if (this.y <= 0) {
      this.y = canvas.height
      this.x = Math.random() * canvas.width
    }
  }

  // 创建泡泡数组
  const bubbles: Bubble[] = []

  // 添加泡泡到数组中
  for (let i = 0; i < 30; i++) {
    const x = Math.random() * canvas.width
    const y = canvas.height + Math.random() * 100
    const radius = Math.random() * 10 + 4
    const speed = Math.random() * 2 + 1
    const bubble: Bubble = new Bubble(x, y, radius, speed)

    bubbles.push(bubble)
  }

  // 定期绘制泡泡

  setInterval(function () {
    // 清空画布
    ctx!.clearRect(0, 0, canvas.width, canvas.height)

    // 绘制每个泡泡
    for (let i = 0; i < bubbles.length; i++) {
      const bubble = bubbles[i]
      bubble.draw()
      bubble.update()
    }
  }, 30)
}
